<template>
	<view class="profile">
		<!-- <view class="top">
		</view> -->
		<!-- <view class="fake">成绩</view> -->
		<view class="center">
			<view class="title">任务完成情况</view>
			<view class="statisticInfo">
				<view class="infoItem" v-for="(item,index) in taskStatistic" :key="index">
					<view class="name">{{item.name}} : {{item.value}}</view>
				</view>
			</view>
		</view>
		<!-- <view class="bottom">
			<view class="title">设置</view>
			<view class="set">
				<view class="set-bg" @click="changeBg">
					<view class="text">更换</view>
					<view class="text">背景</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default{
		data(){
			return{
				taskStatistic:[{name:'总计',value:""},{name:'已完成',value:""},{name:'未完成',value:""}]
			}
		},
		onLoad() {
			this.getValue()
		},
		onShow() {
			// 接收添加，完成，删除后的数据变化后的更新指
			uni.$on("getUpdateList",()=>{
				this.getValue()
			})
		},
		methods:{
			getValue(){
				const app=getApp()
				let total=app.globalData.list.length
				let done=app.globalData.list.filter((item)=>{
					return item.isDone===true
				}).length
				let notDone=app.globalData.list.filter((item)=>{
					return item.isDone===false
				}).length
				let arr=[total,done,notDone]
				this.taskStatistic.map((item,index)=>{
					item.value=arr[index]
				})
			},
			changeBg(){
				uni.chooseImage({
					count:1,
					success(res) {
						console.log(res)
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.profile{
		position: relative;
		height: 100vh;
		.top{
			
		}
		.fake{
			width: 180rpx;
			height: 180rpx;
			border-radius:50%;
			color: white;
			background-color: #68c3a3;
			text-align: center;
			line-height: 180rpx;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			letter-spacing: 4rpx;
			font-size: 30rpx;
			transition: all 1s;
			animation: fakeShow 2s 1;
			opacity: 0;
			z-index: -22;
		    }
		.center{
			width: 100%;
			height: 200rpx;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			border-bottom: 1rpx solid #ecf0f1;
			border-top: 1rpx solid #ecf0f1;
			padding-bottom: 20rpx;
			.title{
				margin-left: 10rpx;
				color: #808080;
				font-size: 32rpx;
				margin-bottom: 20rpx;
			}
			}
			.statisticInfo{
				display: flex;
				justify-content: center;
				align-items: center;
				.infoItem{
					display: flex;
					justify-content: center;
					align-items: center;
					width: 140rpx;
					color: white;
					height: 140rpx;
					border-radius: 50%;
					background-color: #68c3a3;
					font-size: 26rpx;
					animation: realShow 2s 1;
					&:nth-child(2){
						margin: 0 80rpx;
					}
				}
			}
		.bottom{
			.set{
				color: #FFFFFF;
				display: flex;
				border-bottom: 1rpx solid #ecf0f1;
				padding-bottom:20rpx ;
				.set-bg{
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					font-size: 28rpx;
					width: 120rpx;
					height: 120rpx;
					background-color: #C8C7CC;
					border-radius: 50%;
					margin: 0 100rpx;
				}
		}
	}
	@keyframes realShow{
		0%{
			opacity: 0;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			margin: 0;
			
		}
		50%{
			opacity: 0.6;
			
		}
		100%{
			opacity: 1;
		}
	}
	@keyframes fakeShow{
		from{
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			// top: 50%;
			transform: translateY(-550%);
			opacity: 0;
		}
		to{
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			opacity: 1;
		}
	}
}
</style>
